<template>
  <div class="edit-address">
    <van-nav-bar title="编辑收货地址"  left-arrow @click-left="$router.back()"/>
    <van-cell class="common-cell" value="收货地址" />
    <div v-if="detail">{{ detail }}</div>
    <van-form @submit="onSubmit" v-if="detail">

      <van-field class="common-cell" v-model="detail.name" name="姓名" label="姓名" placeholder="请输入收货人姓名" />
      <van-field class="common-cell" v-model="detail.phone" name="电话" label="电话" placeholder="请输入收货人手机号" />
      <van-field v-if="show" class="common-cell" readonly clickable name="area" label="选择地区">
        <template #extra>
          <!-- 省 -->
          <select name="" v-model="detail.province_id" id="" v-if="areaList" @change="getProvinces($event.target.value)">
            <option :value="key" v-for="(item,key) in areaList" :key="key">{{ item.name }}</option>
          </select>
          <!-- 市 -->
          <select v-model="detail.city_id" name="" id="" v-if="myCity" @change="getRegions($event.target.value)">
            <option :value="key" v-for="(item,key) in myCity" :key="key">{{ item.name }}</option>
          </select>
          <!-- 区 -->
          <select v-model="detail.region_id" name="" id="" v-if="region">
            <option :value="key" v-for="(item,key) in region" :key="key">{{ item.name }}</option>
          </select>
        </template>
      </van-field>
      <van-field v-else class="common-cell" clickable name="area" v-model="value" label="地区选择" placeholder="点击选择省市区" @click="show = true" />

      <van-field class="common-cell" v-model="detail.detail" name="detail" label="详细地址" placeholder="街道门牌、楼层等信息" />

      <div style="margin: 23px">
        <van-button  round block color="#f9432f" native-type="submit" style="font-size:17px">保存</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// import { addAddress, getAreaList } from '@/apis/address'
import { getAddressDetail, editAddress, getAreaList } from '@/apis/address'
export default {
  data () {
    return {
      areaList: {},
      list: {},
      searchResult: [],
      showArea: false,
      value: '',
      detail: {},
      show: false
    }
  },
  watch: {
    'detail.city_id': {
      handler () {
        this.detail.region_id = Object.keys(this.region)[0]
      }
    }
  },
  async created () {
    this.AsyncGetAreaList()
    const { data: { detail } } = await getAddressDetail({ addressId: this.$route.query.addressId })
    this.detail = detail
    this.value = detail.region.province + '/' + detail.region.city + '/' + detail.region.region
    console.log(this.value)
  },
  methods: {
    onConfirm (values) {
      this.detail.region = values.map(item => ({ label: item.name, value: +item.code }))
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      this.showArea = false
    },
    onSubmit () {
      const addressId = this.detail.address_id

      this.detail.region = [
        { value: this.detail.province_id, label: this.areaList[this.detail.province_id].name },
        { value: this.detail.city_id, label: this.myCity[this.detail.city_id].name },
        { value: this.detail.region_id, label: this.region[this.detail.region_id].name }
      ]
      delete this.detail.address_id
      delete this.detail.city_id
      delete this.detail.province_id
      delete this.detail.region_id
      delete this.detail.user_id
      if (this.detail.region === [] || this.detail.name === '' || this.detail.phone === '' || this.detail === '') {
        return
      }
      console.log(this.detail)
      this.AsyncEditAddress(({ addressId: addressId, form: this.detail }))
    },
    async AsyncEditAddress (params) {
      await editAddress(params.addressId, params.form)
      this.detail = ''
      this.$router.back()
    },
    async AsyncGetAreaList () {
      const {
        data: { list }
      } = await getAreaList()
      this.areaList = list
    },
    getProvinces (value) {
      this.detail.province_id = +value
      this.detail.city_id = Object.keys(this.myCity)[0]
    }
  },
  computed: {
    myCity () {
      return this.areaList[this.detail.province_id].city
    },
    region () {
      const region = this.myCity[this.detail.city_id].region
      return region
    }
  }
}
</script>

<style lang="less" scoped>
.van-field,
.van-address-edit__fields {
  font-size: 17px !important;
  height: 50px !important;
}

::v-deep select {
  width: 68px;
  margin-right: 23px;
  border: 0;
}

::v-deep select::-webkit-scrollbar {
  width: 0.5rem;
  background: transparent;
}
</style>
